<template>
  <div class="app-container" v-loading="loading">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/agents/index' }">智能体</el-breadcrumb-item>
      <el-breadcrumb-item>配置角色</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="card dialog-form">
      <h1>配置角色</h1>
      <el-divider />
      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item label="角色模板" prop="roleName" class="block-label">
          <el-button
            size="mini"
            v-for="(item, index) of templatesList"
            :key="index"
            @click="handleChangeTemplates(item, index)"
            :type="buttonIndex == index ? 'primary' : ''"
            >{{ item.templateName }}</el-button
          >
        </el-form-item>

        <el-form-item label="助手昵称" prop="nickName">
          <el-input v-model="form.nickName" placeholder="请输入助手昵称" />
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="对话语言" prop="language">
              <el-select v-model="form.language" placeholder="请选择对话语言">
                <el-option
                  v-for="(item, index) in languages"
                  :key="index"
                  :label="item.title"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="角色音色" prop="voiceName">
              <el-select v-model="form.voiceName" placeholder="请选择角色音色">
                <el-option
                  v-for="(item, index) in volcengineVoicesList"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="" prop="roleDesc">
          <div class="intell-txt">
            <label>角色介绍</label>
            <el-button type="text" @click="handleChangeAI">✨ AI一键优化</el-button>
          </div>
          <el-input
            v-model="form.roleDesc"
            type="textarea"
            maxlength="3000"
            placeholder="请输入角色介绍"
            show-word-limit
          />
        </el-form-item>

        <el-form-item label="记忆体" class="title-item" />

        <el-form-item label="" prop="memory">
          <div class="intell-txt">
            <label>当前记忆（每次对话后重新生成）</label>
            <!-- <el-button type="text">清除记忆</el-button> -->
          </div>
          <el-input
            v-model="form.memory"
            type="textarea"
            maxlength="3000"
            placeholder="请输入角色介绍"
            show-word-limit
          />
        </el-form-item>

        <el-form-item label="语言模型" prop="modelId">
          <el-select v-model="form.modelId" placeholder="请选择语言模型">
            <el-option
              v-for="(item, index) of modelsList"
              :key="index"
              :label="item.configName"
              :value="item.configId"
            />
          </el-select>
          <div>改变模型后，建议清空记忆体，以免影响体验。</div>
        </el-form-item>

        <el-collapse class="intel-collapse" v-model="activeNames">
          <el-collapse-item name="1">
            <template slot="title"> 高级设置 </template>

            <el-form-item label="角色语速" prop="speechSpeed">
              <el-select v-model="form.speechSpeed" placeholder="请选择角色语速">
                <el-option
                  v-for="(item, index) in defaultModel"
                  :key="index"
                  :label="item.title"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="语音识别速度" prop="identifySpeed">
              <el-select v-model="form.identifySpeed" placeholder="请选择语音识别速度">
                <el-option
                  v-for="(item, index) in defaultModel"
                  :key="index"
                  :label="item.title"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="角色音调" class="intell-slide-item" prop="tone">
              <div class="intell-slider">
                <el-slider
                  class="slider"
                  v-model="form.tone"
                  :step="1"
                  :min="-2"
                  :max="2"
                />
              </div>
            </el-form-item>
          </el-collapse-item>
        </el-collapse>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">重 置</el-button>
        </div>
        <div class="tips">
          <p>注意：保存配置后，需要重启设备，新的配置才会生效。</p>
          <el-button type="text" @click="handleShowMCP">MCP接入点</el-button>
        </div>
      </el-form>
    </el-card>

    <!--  底部  -->
    <detault-footer />

    <configure-roles-dialog :open="open" @cancel="rolesClose" />
  </div>
</template>

<script>
import { agentsById, modelList, templateList, updAgents } from "@/api/login";
import {
  volcengineVoicesList,
  languages,
  defaultModel,
  rules,
} from "./components/volcengineVoicesList";

import configureRolesDialog from "./components/configureRoles-dialog";
export default {
  data() {
    return {
      form: {
        nickName: null,
        language: "",
        speechSpeed: "",
        identifySpeed: "",
        tone: 0,
        roleName: "",
        roleDesc: "",
        modelId: null,
        voiceName: "",
      },
      rules,
      activeNames: [],
      roleId: null,
      loading: false,
      modelsList: [],
      templatesList: [],
      volcengineVoicesList,
      buttonIndex: null,
      defaultModel,
      languages,
      open: false,
    };
  },
  created() {
    this.roleId = this.$route.query.roleId;
    this.getRoles();
  },
  components: {
    configureRolesDialog,
  },
  methods: {
    async getRoles() {
      try {
        this.loading = true;
        const { roleId } = this;
        const [agents, models, templates] = await Promise.all([
          agentsById(roleId),
          modelList(),
          templateList(),
        ]);
        this.buttonIndex = templates.data.findIndex(
          (x) => x.templateName == agents.data.roleName
        );
        this.modelsList = models.data || [];
        this.templatesList = templates.data || [];
        this.form = agents.data || {};
        this.form.tone = Number(agents.data.tone || 0);
      } catch (error) {
        console.error("获取接口错误", error);
      } finally {
        this.loading = false;
      }
    },
    handleChangeTemplates(item, index) {
      this.form.roleName = item.templateName;
      this.form.roleDesc = item.templateContent;
      this.buttonIndex = index;
    },
    cancel() {
      this.buttonIndex = null;
      this.resetFormFun();
    },
    resetFormFun() {
      this.form = {
        nickName: null,
        language: "",
        speechSpeed: "",
        identifySpeed: "",
        tone: 0,
        roleName: "",
        roleDesc: "",
        modelId: null,
        voiceName: "",
      };
      this.resetForm("form");
    },
    async submitForm() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          try {
            const { form } = this;
            this.loading = true;
            await updAgents(form);
            this.$modal.msgSuccess("配置成功");
          } catch (error) {
            console.error("配置错误", error);
          } finally {
            this.loading = false;
          }
        }
      });
    },
    handleChangeAI() {
      this.$modal.msgSuccess("优化成功");
    },
    handleShowMCP() {
      this.open = true;
    },
    rolesClose() {
      this.open = false;
    },
  },
};
</script>

<style scoped lang="scss">
.dialog-form {
  max-width: 800px;
  margin: 0 auto;
  width: 90%;
  h1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }
}
.card {
  margin: 22px auto;
}

.intell-slider {
  display: flex;
  .slider {
    max-width: 300px;
    width: 100%;
  }
}
.intell-txt {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
::v-deep .block-label label {
  display: block;
  float: none;
  text-align: left;
}
.dialog-form .el-select {
  width: 100%;
}
.title-item {
  margin-bottom: 0;
}
.tips {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-size: 14px;
  margin-top: 22px;
}
.dialog-footer {
  margin-top: 22px;
}
</style>

<style>
.intel-collapse {
  border-bottom: none;
  border-top: none;
}
.intel-collapse .el-collapse-item__header {
  border-top: none;
}
.intel-collapse .el-collapse-item__header {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
}
.intel-collapse .el-collapse-item__arrow {
  margin: 0 10px;
}
.intell-slide-item label {
  float: none;
}
</style>
